<template>
  <section class="el-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>
<script lang="ts">
export default {
  name: 'ElContainer'
}
</script>
<script setup lang="ts">
import { computed, useSlots, VNode, Component } from 'vue'

// defineOptions({
//   name: 'ElContainer',
//   inheritAttrs: false
// })

interface Props {
  isVertical?: boolean
}

const props = defineProps<Props>()

//获取slots
const slots = useSlots()
const isVertical = computed(() => {
  //如果组件名字为el-header 或 el-footer，则设置为垂直布局
  if (slots && slots.default) {
    const slot = slots.default()
    console.log(slot)
    return slot.some((s: VNode) => {
      let nodeName = (s.type as Component).name
      return nodeName === 'ElHeader' || nodeName === 'ElFooter'
    })
  }
  if (props.isVertical) {
    return true
  }
  return false
})
</script>

<style lang="scss" scoped>
@import '../../styles/mixin';

@include b(container) {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-basis: auto;
  flex-direction: row;
  min-width: 0;

  @include when('vertical') {
    flex-direction: column;
  }
}
</style>
